<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>北大青鸟邮箱注册</title>
		<style>
			body {
				width: 100%;
				height: 100%;
			}

			div#id1 {
				/* margin: auto; */
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-image: url(img/reg-mobile.jpg);
				background-size: 120%;
				transform: translateY(30%);
				/**下移元素**/
				-ms-transform: translateY(30%);
				-webkit-transform: translateY(30%);
			}

			div#id2 {
				margin: auto;
				width: 50%;
				height: 50%;
				text-align: center;
				background-color: white;
				font-size: 20px;
				padding-top: 150px;
				/* padding-left: 80px; */
			}

			#id {
				height: 40px;
				width: 130px;
				background-image: url(img/btn.jpg);
				background-size: 130px;
			}

			#nav {
				margin: auto;
				/* margin-top: 0%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 0%; */
				height: 28px;
			}

			#nav ul {
				display: block;
				list-style: none;
				/* margin-top: 0%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 0%; */
			}

			#nav li {
				display: inline;
			}

			#nav a {
				line-height: 0px;
				color: black;
				text-decoration: none;
				padding: 8px 20px;
			}

			#nav a:active {
				background-color: white;
			}

			#d1 {
				background-color: skyblue;
			}

			#d2 {
				background-color: white;
			}

			#dul {
				width: 400px;
				height: 20px;
				margin-left: 22%;
				font-size: 20px;
				padding-top: 0px;
			}
			#phone {
				padding-left: 20px;
				box-sizing: border-box;
				background-image: url(img/login-input4.png);
				background-repeat: no-repeat;
				background-position: 0% center;
				background-color: white;
			}
			
			#pass {
				padding-left: 20px;
				box-sizing: border-box;
				background-image: url(img/login-input2.png);
				background-repeat: no-repeat;
				background-position: 0% center;
				background-color: white;
			}
			#yanzheng {
				padding-left: 20px;
				box-sizing: border-box;
				background-image: url(img/login-input3.png);
				background-repeat: no-repeat;
				background-position: 0% center;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div id="id1">
			<div id="dul">
				<ul id="nav">
					<li><a href="../zy6.14/bdqn (1).html" id="d1">手机注册</a></li>
					<li><a href="../zy6.14/bdqnemail.html" id="d2">邮箱注册</a></li>
				</ul>
			</div>
			<div id="id2">

				<form action="../lamges/1.jpg" method="GET">
					<p>
						<label for="email"></label><input type="email" name="email" maxlength="11"
							style="width: 250px;height: 25px;" placeholder="请输入你的常用邮箱" required />
					</p>
					<p>
						<label for="name"></label><input type="text" name="name" maxlength="6"
							style="width: 250px;height: 25px;" placeholder="请输入昵称" required />
					</p>
					<p>
						<label for="pass"></label><input id="pass" type="password" name="pass" maxlength="11"
							style="width: 250px;height: 25px;" placeholder="请输入密码" required />
					</p>
					<p>
						<label for="pass"></label><input id="pass" type="password" name="pass" maxlength="11"
							style="width: 250px;height: 25px;" placeholder="请再次输入密码" required />
					</p>
					<p>
						<label for="num"></label><input id="yanzheng" type="number" name="num" maxlength="6"
							style="width: 165px;height: 25px;" placeholder="验证码" pattern="[\D]*" required />
						<img src="../../img/img_01.png" style="width: 85px;height: 30px;">
					</p>
					</select>
					<p> <input name="kj" type="checkbox" value="同意" required>同意协议
					</p>
					<button type="submit"
						style="width: 200px;height: 40px;background-color:skyblue;color: white">注册</button>
			</div>
		</div>
	</body>
</html>
